<template>
  <div class="statistic-org-picker">
    <span v-if="label">{{ label }}</span>
    <el-cascader
      ref="cascader"
      class="org-picker"
      v-model="selectedOrg"
      :props="props"
      :options="options"
      size="medium"
      expandTrigger="hover"
      placeholder="请输入关键字搜索或选择单位"
      filterable
      :show-all-levels="false"
      clearable
      @change="onChange"></el-cascader>
  </div>
</template>

<script>
import { listCheckOrgan } from '@api/modules/home'
export default {
  name: 'OrgPicker',
  components: {},
  props: {
    label: {
      type: String,
      default: '单位：',
    },
    value: {
      type: String,
    },
  },
  data() {
    return {
      props: {
        label: 'orgName',
        value: 'id',
        children: 'queryOutVOS',
        checkStrictly: true,
        emitPath: false,
      },
      options: [],
      selectedOrg: '',
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.selectedOrg = val
    },
  },
  created() {
    if (this.value) {
      this.selectedOrg = this.value
    }
  },
  mounted() {
    this.listCheckOrgan()
  },
  methods: {
    listCheckOrgan() {
      listCheckOrgan().then(res => {
        if (res.status === 200) {
          const resData = res.data

          this.options = resData
        }
      })
    },
    onChange() {
      this.$nextTick(() => {
        const nodes = this.$refs.cascader.getCheckedNodes()
        const nodeItem = nodes[0]
        if (nodeItem) {
          this.$emit('change', nodeItem.data)
        } else {
          this.$emit('change', null)
        }
        this.$refs.cascader.toggleDropDownVisible(false)
        this.$emit('input', (nodeItem && nodeItem.data.id) || null)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.statistic-org-picker {
  display: flex;
  align-items: center;
  width: 260px;
  .org-picker {
    flex: 1;
  }
}
</style>
